<template>
	<view>
		<cu-page-header :style="styleObj">
			<view class="cu-w-100 cu-px-20 cu-pt-40">
				<!-- <view class="cu-pl-20 cu-font-weight cu-font-big"
					:style='{"border-left": "6rpx solid" + styleObj.color}'> 个人中心</view> -->
				<view class="cu-w-100 cu-p-20"></view>
				<view class="cu-w-100 cu-pt-40 cu-row">
					<view class="cu-span24-6 cu-row cu-d-flex cu-j-center cu-h-100">
						<u-avatar size="80" :src="userInfo.avatar"></u-avatar>
					</view>
					<template v-if="getLoginMark">
						<view class="cu-span24-15" @click="vk.myfn.gotoPage('/pages/oauth/register/index','navigate')">
							<view class="cu-w-100 cu-pt-20 cu-font-weight cu-font-big">{{userInfo.nickname}}</view>
							<view class="cu-w-100 cu-pt-20 ">{{userInfo.motto != '' ? userInfo.motto : "这家伙很懒，什么也没留下"}}</view>
						</view>
						<view class="cu-span24-3 cu-pt-20 cu-row cu-d-flex cu-j-center" @click="vk.myfn.gotoPage('/pages/oauth/register/index','navigate')">
							<u-icon :color="styleObj.color" :bold="true" name="arrow-right" ></u-icon>
						</view>
					</template>
					<template v-if="!getLoginMark">
						<view @click="vk.myfn.gotoPage('/pages/oauth/login/index','navigate')" class="cu-span24-15">
							<view  class="cu-w-100 cu-pt-20 cu-font-weight cu-font-big">登录 / 注册</view>
							<view class="cu-w-100 cu-pt-20 cu-position-relative">
								<view class="cu-position-absolute cu-left-0"><u-button size="mini" shape="circle" text="欢迎登录开始记账吧"
									color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" :customStyle="{width:'240rpx'}"></u-button></view>
							</view>
						</view>
						<view class="cu-span24-3 cu-pt-20 cu-row cu-d-flex cu-j-center"></view>
					</template>
					
				</view>
			</view>
		</cu-page-header>
		<cu-card :style="cardStyle">
			<view class="cu-w-100 cu-d-flex cu-flex-row cu-j-sb cu-j-center cu-a-center">
				<view class="cu-span24-8 cu-flex-grow cu-d-flex cu-flex-row cu-j-center cu-a-center" @click="vk.myfn.gotoPage('/pages/accountbook/index/index','navigate')">
					<view>
						<view><span class="iconfont icon-shoukuanzhangben" style="font-size: 80rpx;"></span></view>
						<view class="cu-pt-20 cu-flex-grow cu-d-flex cu-flex-row cu-j-center cu-a-center cu-text-light-muted">账本</view>
					</view>
				</view>
				<view class="cu-span24-8 cu-flex-grow cu-d-flex cu-flex-row cu-j-center cu-a-center">
					<view>
						<view><span class="iconfont icon-caisetubiao" style="font-size: 80rpx;"></span></view>
						<view class="cu-pt-20 cu-flex-grow cu-d-flex cu-flex-row cu-j-center cu-a-center cu-text-light-muted">图表</view>
					</view>
					
				</view>
				<view class="cu-span24-8 cu-flex-grow cu-d-flex cu-flex-row cu-j-center cu-a-center" @click="vk.myfn.gotoPage('/pages/accounting/type/index','navigate')">
					<view>
						<view><span class="iconfont icon-fenlei" style="font-size: 80rpx;"></span></view>
						<view class="cu-pt-20 cu-flex-grow cu-d-flex cu-flex-row cu-j-center cu-a-center cu-text-light-muted">分类</view>
					</view>
				</view>
			</view>
		</cu-card>
		<cu-card :style="cardStyle">
			<u-cell-group :border="false">
				<u-cell  title=" 操作说明">
					<cu-icon custom-prefix="iconfont" slot="icon" size="24" name="icon-caozuoshuoming-1"></cu-icon>
				</u-cell>
				<u-cell  title=" 关于我们" :border="false" @click="vk.myfn.gotoPage('/pages/oauth/about/index','navigate')" >
					<cu-icon slot="icon" size="24" custom-prefix="iconfont" name="icon-guanyuwomen"></cu-icon>
					<view slot="right-icon">v 3.0.0</view>
				</u-cell>
			</u-cell-group>
		</cu-card>
		<cu-card :style="cardStyle">
			<u-cell-group :border="false">
				<u-cell  title=" 设置" :border="false" @click="vk.myfn.gotoPage('/pages/oauth/setup/index','navigate')">
					<cu-icon slot="icon" size="24" custom-prefix="iconfont" name="icon-shezhi"></cu-icon>
				</u-cell>
			</u-cell-group>
		</cu-card>
	</view>
</template>

<script>
	let vk = uni.vk;
	export default {
		props: {
			data: {
				type: Object,
				default:{
					"loginMark": false,
					"userInfo": {
						"avatar":"",
						"nickname": "",
						"motto": ""
					},
				}
			},
			userInfo: {
				type: Object,
				default:{
					"avatar":"",
					"nickname": ""
				}
			}
		},
		computed:{
			getLoginMark(){
				if(this.userInfo && this.userInfo.nickname && this.userInfo.nickname !== ''){
					return true
				}
				return false
			}
		},
		data() {
			// 页面数据变量
			return {
				styleObj: {
					"color": "#FFF"
				},
				cardStyle:{"marginTop" : "20rpx"},
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			vk = uni.vk;
			this.options = options;
			this.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {

		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {
			this.init(undefined);
		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {

		},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {
				this.main = vk.getVuex('$app.color.main');
				this.secondary = vk.getVuex('$app.color.secondary');
			},
			
		}
	}
</script>
<style lang="scss" scoped>

</style>